<!-- ./idFieldRender.vue 文件 -->
<template>
    <div>
        <!-- 自定义 -->

        <el-tooltip :disabled="state.hasSelection" effect="dark" content="请勾选" placement="top">
            <span>
                <el-button ref="buttonRef" v-click-outside="hide" :disabled="!state.hasSelection" type="primary" class="ml15" >
                    123456
                </el-button>
            </span>
        </el-tooltip>
        <el-popover
            ref="popoverRef"
            :virtual-ref="buttonRef"
            trigger="click"
            virtual-triggering
            placement="top-start"
            :width="200"
            :height="200"
        >
            <div>
                <san class="btn" @click="hide">关闭</san>
            </div>
        </el-popover>
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx, ElInput } from 'element-plus'
import { reactive, ref, nextTick } from 'vue';
import { agencyFee } from '/@/api/backend/user/user'

// 自定义

const inputRef = ref()

const buttonRef = ref();
const popoverRef = ref();

// BuildAdmin将自动为此组件传递五个Props
interface Props {
    renderValue: any // 单元格值
    renderRow: TableRow // 当前行数据
    renderField: TableColumn // 当前列数据
    renderColumn: TableColumnCtx<TableRow> // 当前列上下文数据
    renderIndex: number // 当前行号
}
const props = defineProps<Props>()

const state = reactive({
    edit: false,
    value: null,
    showText: props.renderValue ? props.renderValue + '%' : null,
    newValue: -1,
    loading: false,
    show: false,
    name: '',
    hasSelection: true,
    dropdownList: [],
    prop: '',
    visible: false
})

const hide = () => {
    popoverRef.value.hide();
};


const cancel = () => {
    console.log(1)
    state.show = false;
}

const save = () => {
    state.loading = true;
    state.edit = false;
    agencyFee({id:props.renderRow.id, agency_fee: state.value}).then((e) => {
        state.loading = false;
        if(e.code == 1){
            state.showText = (state.value == '' || state.value == 0 || state.value == null || e.data.agency_fee == 0) ? null : e.data.agency_fee + '%'
            state.newValue = e.data.agency_fee == 0 ? null : e.data.agency_fee;
        }else{

        }
        
    }).catch((err) => {
        console.log(err)
    })
}

const edit = () => {
    state.show = true;
    nextTick(() => {
        inputRef.value.focus();
    })
}

</script>

<style scoped lang="scss">
// 自定义
.pointer{
    cursor: pointer;
    user-select: none;
}
.agency-fee-input{
    width: 150px;
}
</style>